<template>
	<base-page title="绑定银行卡" backgroundColor="white">
		<view v-if="errorMsg" class="h-36 flex item-center px-16 leading-17 fs-12 color-primary" style="background: rgba(250, 69, 67, 0.30);">
			{{ errorMsg }}
		</view>
		<view class="p-16 fs-14 text-color-regular">
			<view>
				<view class="flex item-center">
					<text class="mr-8 flex-shrink" style="width:80px;">账户名称：</text>
					<input v-model="formData.cardName" class="flex-1 h-36 text-color-regular bg-default radius-12 px-12 leading-20" placeholder="请输入账户名称" placeholder-class="text-color-hint" />
				</view>
				<view class="fs-12 text-color-hint leading-17 mt-8" style="margin-left:84px;">请填写与入驻时提供的身份证一致的开户名</view>
			</view>
			<view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink" style="width:80px;">银行卡号：</text>
				<input v-model="formData.cardNo" class="flex-1 h-36 text-color-regular bg-default radius-12 px-12 leading-20" placeholder="请输入银行卡号" placeholder-class="text-color-hint" />
			</view>
			<view class="flex item-center mt-16">
				<text class="mr-8 flex-shrink" style="width:80px;">银行所在地：</text>
				<picker
					class="flex-1 h-36 text-color-regular bg-default radius-12 px-12"
					style="line-height:36px;"
					mode="multiSelector"
					range-key="localName"
					@columnchange="onnodeclick"
					:range="[provinceList, cityList]"
					@change="onchange"
				>
					<view :style="{color:formData.bankProvinceName?'':'#A5A7A9'}"
						class="flex item-center justify-between">
						<text> {{formData.bankProvinceName ?
						formData.bankProvinceName + (formData.bankCityName ? '/' + formData.bankCityName : '')
						: '请选择银行卡所在地'}}</text>
						<image class="w-6 h-12 ml-4" src="@/static/svg/arrow-stroke.svg"></image>
					</view>
				</picker>
			</view>
		</view>
		
		<template #footer>
			<view class="m-12 bg-primary radius-8 flex center h-46 fs-16 text-white" :style="disableSubmit?'opacity: 0.3;':''" @click="submit">下一步</view>
		</template>
	</base-page>
</template>

<script setup name="BindingBankCard">
	import { ref, computed, getCurrentInstance, onMounted, unref } from 'vue'
	import { useWithdrawStore } from '@/stores/modules/withdraw.js'
	import { listHfAllRegionApi } from '@/api/common.js'
	
	const withdrawStore = useWithdrawStore()
	const instance = getCurrentInstance()
	const errorMsg = ref(withdrawStore.refuseReason)
	const formData = ref({
		bankCityCode: '', // 银行所在地市code
		bankCityName: '', // 银行所在地市名称
		bankProvinceCode: '', // 银行所在地省份code
		bankProvinceName: '', // 银行所在地省份名称
		cardName: '', // 持卡人姓名
		cardNo: '' // 银行卡号
	})
	
	const disableSubmit = computed(() => {
		return !(formData.value.cardName && formData.value.cardNo && formData.value.bankProvinceName)
	})
	
	const onchange = ({ detail }) => {
		if (detail.value) {
			formData.value.bankProvinceName = provinceList.value[detail.value[0]].localName
			formData.value.bankProvinceCode = provinceList.value[detail.value[0]].code
			if (cityList.value && cityList.value.length) {
				formData.value.bankCityName = cityList.value[detail.value[1]].localName
				formData.value.bankCityCode = cityList.value[detail.value[1]].code
			} else {
				formData.value.bankCityName = ''
				formData.value.bankCityCode = ''
			}
		}
	}
	
	const onnodeclick = ({ detail }) => {
		if (detail.column === 0) {
			const province = provinceList.value[detail.value]
			cityList.value = province.regions || []
		}
	}
	
	/**
	 * 点击下一步，提交用户业务入驻，返回汇付入驻结果
	 * 入驻失败，绑定银行卡页面，提示失败原因，可重新提交；
	 * 入驻成功，调用灵活用工个人签约，进行签约
	 */
	const submit = () => {
		if (disableSubmit.value) return
		uni.showLoading()
		withdrawStore.agentEnterApply(unref(formData)).then(res => {
			uni.hideLoading()
			console.log('签约结果', res)
			// state 状态(1-待入驻，2-入驻失败，3-待签约，4-签约成功，5-签约失败，6-入驻审核中)
			if(res.state === 4) {
				// 已签约
				const eventChannel = instance.ctx.getOpenerEventChannel()
				eventChannel.emit('onBindingSuccess', { result: true })
				uni.navigateBack()
				uni.showToast({
					title: '银行卡绑定成功',
					icon: 'none'
				})
			} else if(res.state === 6) {
				uni.redirectTo({
					url: '/pagesG/withdraw/waiting-audit'
				})
			} else if(res.state === 3) {
				uni.navigateTo({
					url: '/pagesG/withdraw/sign',
					events: {
						onSignResult(res) {
							console.log('签约结果 222', res)
							if (res.result) {
								const eventChannel = instance.ctx.getOpenerEventChannel()
								eventChannel.emit('onBindingSuccess', { result: true })
								uni.navigateBack()
							} else {
								errorMsg.value = withdrawStore.refuseReason
							}
						}
					}
				})
			} else {
				errorMsg.value = res.refuseReason
			}
		}).catch((e) => {
			uni.hideLoading()
		})
	}
	
	const provinceList = ref([])
	const getProvinces = () => {
		getHfRegionsByIdApi(0).then(res => {
			provinceList.value = res
		})
	}
	const cityList = ref([])
	const getAllRegion = () => {
		listHfAllRegionApi().then(res => {
			provinceList.value = res
			if (res && res.length) {
				cityList.value = res[0].regions || []
			}
		})
	}
	
	onMounted(() => {
		getAllRegion()
	})
</script>
